<template>
  <div class="shangpinDialog">
    <el-dialog
      title="选择商品"
      :close-on-click-modal="false"
      :visible.sync="dialogTableVisible"
      width="500">
      <el-row :gutter="20">
        <!--部门数据-->
        <el-col :span="5" :xs="24" style="max-height: 400px;overflow: auto">
          <div class="head-container">
            <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              default-expand-all
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>
        <!--用户数据-->
        <el-col :span="19" :xs="24">
          <div class="pageTop" style="padding: 10px 10px;display: flex;align-items: center;height: 50px" >
            <input style="width: 200px;margin-right: 10px" class="inputClass" v-model="queryParams.goodsName" type="text"  placeholder="请输入商品编号"    v-on:keyup.enter="getList" >
            <el-button type="primary" size="medium" @click="getList">搜 索</el-button>
          </div>
          <el-table
            highlight-current-row
            max-height="300"
            @selection-change="handleSelectionChange"
            @select='fuxuanchan'
            v-loading="loading"
            :data="dataList"
            ref="multipleTable"
            stripe border style="margin-top: 20px"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column
              type="selection"
              align="center"
              width="55">
            </el-table-column>
            <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
            <el-table-column align="center" label="商品编号"   property="goodsSn"   ></el-table-column>
            <el-table-column align="center" label="商品名称"   property="goodsName"  width="180" ></el-table-column>
            <el-table-column align="center" label="规格型号"   property="goodsWeight"   ></el-table-column>
            <el-table-column align="center" label="单位"   property="purchaseUnit"   ></el-table-column>
          </el-table>
          <el-pagination
            style="margin-top: 20px;text-align: right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            :current-page="queryParams.current"
            :page-size="queryParams.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>


      <div class="pageTop" style="padding:10px;margin-top: 15px;text-align: right">
        <el-button type="primary" size="medium" @click="determine" >确 定</el-button>
        <el-button  size="medium" @click="cancel" >关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import {deteleObject} from "@/utils/index"
export default {
  props: ['shnagpinData'],
  name: "Role",
  data() {
    return {
      total:0,
      defaultProps: {
        children: "child",
        label: "catName"
      },
      // 部门树选项
      deptOptions: undefined,
      loading:false,
      dataList:[ ],
      dialogTableVisible:true,
      queryParams:{
        current:1,
        size:10,
        goodsName:'',
        catId:'',
        warehouseId:'',
      },
      multipleSelection:[],
    };
  },
  watch: {
    dialogTableVisible: function () {
      this.dialogTableVisible = true;//始终让他为true;
      this.cancel();//隐藏
    },
  },

  created() {
    this.queryParams.warehouseId = this.shnagpinData.warehouseId
    //商品查询
    this.getList()
    //分类查询
    this.getFenlei()


  },

  methods: {
    submit:function (){
      console.log('顶顶顶顶')
    },
    fuxuanchan:function (selection, row){
      console.log('监听selection',selection)
      console.log('监听row',row)
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      console.log('节点单击',data.catId)
      this.queryParams.catId = data.catId
      this.getList();
    },
    handleSelectionChange(row) {
      this.multipleSelection = row;
    },
    //分页查询
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.current = val
      this.getList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.size = val
      this.getList()
    },
    //分类查询
    getFenlei:function (){
      request({
        url: '/wh/products/categoryList',
        method: 'get',
      }).then(response => {
        this.deptOptions =response.data

      });
    },
    //搜索
    getList:function (){
      this.loading=true
      request({
        url: '/wh/products/iPage',
        method: 'get',
        params: this.queryParams
      }).then(response => {
        this.loading=false
        this.dataList = response.data.records
        this.total =response.data.total




      });

    },
    //确定
    determine:function(){
      this.$emit('callback',this.multipleSelection)//将submitModel的值传给父组件
    },
    //隐藏
    cancel:function(){
      // this.determine()
      this.$emit('callback','')//将submitModel的值传给父组件
    },

  }
};
</script>
<style scoped>
.shangpinDialog {

}



</style>
